<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
    <!-- Icon from Material Line Icons by Vjacheslav Trushkin - https://github.com/cyberalien/line-md/blob/master/license.txt -->
    <g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
      <path
        stroke-dasharray="64"
        stroke-dashoffset="64"
        d="M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9"
      >
        <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.6s" values="64;0" />
      </path>
      <path stroke-dasharray="2" stroke-dashoffset="2" d="M9 9v1">
        <animate
          fill="freeze"
          attributeName="stroke-dashoffset"
          begin="0.7s"
          dur="0.2s"
          values="2;0"
        />
      </path>
      <path stroke-dasharray="2" stroke-dashoffset="2" d="M15 9v1">
        <animate
          fill="freeze"
          attributeName="stroke-dashoffset"
          begin="0.9s"
          dur="0.2s"
          values="2;0"
        />
      </path>
      <path
        stroke-dasharray="12"
        stroke-dashoffset="12"
        d="M8 14c0.5 1.5 1.79 3 4 3c2.21 0 3.5 -1.5 4 -3"
      >
        <animate
          fill="freeze"
          attributeName="stroke-dashoffset"
          begin="1.1s"
          dur="0.2s"
          values="12;0"
        />
      </path>
    </g>
  </svg>
</template>

<script lang="ts">
export default {
  name: 'LineMdEmojiSmile',
}
</script>
